/**
 * 发送GET请求
 * 技术栈：function + ajax + callback
 * @param {String} url 请求地址
 * @param {String} params 请求参数   格式：参数名=值&....&参数名=值
 * @param {Function} callback  回调函数
 * @param {Function} headersFn 自定义请求头
 * @return undefined
 */
function get(url, params, callback, headersFn = null) {
  // 一、 创建xhr对象
  const xhr = new XMLHttpRequest();
  // 二、 监听请求状态
  xhr.onreadystatechange = function() {
    // 判断后端返回数据后再处理
    if (xhr.readyState === 4) {
      // 判断返回的状态200成功在处理
      if (xhr.status === 200) {
        // 获取数据
        let res = JSON.parse(xhr.responseText);
        // 不同逻辑处理
        callback(res);
      } else {
        console.log("请求失败：", xhr.status);
      }
    }
  };
  // 三、 设置请求方式，请求地址
  xhr.open("get", `${url}?${params}`);

  if (headersFn) headersFn(xhr);

  // 四、 发送
  xhr.send(null);
}

/**
 * 发送POST请求
 * 技术栈：function + ajax + callback
 * @param {String} url 请求地址
 * @param {String} params 请求参数   格式：参数名=值&....&参数名=值
 * @param {Function} callback  回调函数
 * @param {Function} headersFn 自定义请求头
 * @return undefined
 */
function post(url, params, callback, headersFn = null) {
  // 一、 创建xhr对象
  const xhr = new XMLHttpRequest();
  // 二、 监听请求状态
  xhr.onreadystatechange = function() {
    // 判断后端返回数据后再处理
    if (xhr.readyState === 4) {
      // 判断返回的状态200成功在处理
      if (xhr.status === 200) {
        // 获取数据
        let res = JSON.parse(xhr.responseText);
        // 不同逻辑处理
        callback(res);
      } else {
        console.log("请求失败：", xhr.status);
      }
    }
  };
  // 三、 设置请求方式，请求地址
  xhr.open("post", url);

  xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
  if (headersFn) headersFn(xhr);

  // 四、 发送
  xhr.send(params);
}
